<template>
  <view class="search-container">
    <view class="search-bar">
      <input 
        type="text" 
        v-model="searchQuery" 
        placeholder="请输入商品名称" 
        class="search-input"
      />
      <button @click="handleSearch" class="search-btn">搜索</button>
      <button @click="clearSearch" class="clear-btn" v-if="searchQuery">清除</button>
    </view>

    <view class="product-list" v-if="searchResults.length > 0">
      <view class="product-item" v-for="(item, index) in searchResults" :key="index">
        <image :src="item.image" class="product-image"></image>
        <view class="product-details">
          <text class="product-name">{{ item.name }}</text>
          <text class="product-price">价格: ¥{{ item.price }}</text>
        </view>
      </view>
    </view>

    <view class="no-results" v-else-if="searched && searchResults.length === 0">
      <text>没有找到相关商品</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [],
      searched: false,
      products: [
        { name: '商品1', price: 100, image: 'https://example.com/product1.jpg' },
        { name: '商品2', price: 200, image: 'https://example.com/product2.jpg' },
        { name: '商品3', price: 300, image: 'https://example.com/product3.jpg' },
        // 更多商品...
      ]
    };
  },
  methods: {
    handleSearch() {
      this.searched = true;
      if (this.searchQuery.trim() === '') {
        this.searchResults = [];
        return;
      }

      this.searchResults = this.products.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
    clearSearch() {
      this.searchQuery = '';
      this.searchResults = [];
      this.searched = false;
    }
  }
};
</script>

<style scoped>
.search-container {
  padding: 40rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.search-input {
  flex: 1;
  padding: 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
}

.search-btn, .clear-btn {
  padding: 20rpx 40rpx;
  background-color: #ff5000;
  color: white;
  border: none;
  border-radius: 8rpx;
  margin-left: 20rpx;
  font-size: 28rpx;
}

.search-btn {
  background-color: #007aff;
}

.product-list {
  margin-top: 40rpx;
}

.product-item {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid #ccc;
}

.product-image {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
}

.product-details {
  flex: 1;
}

.product-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.product-price {
  font-size: 28rpx;
  color: #ff5000;
  margin-top: 10rpx;
}

.no-results {
  text-align: center;
  margin-top: 40rpx;
  color: #999;
  font-size: 32rpx;
}
</style>